<template>
  <view class="page">
    <!-- 导航栏 -->
    <uni-nav-bar
      title="积分明细"
      left-icon="left"
      :border="false"
      background-color="#fabc02"
      color="#333"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 筛选区域 -->
      <view class="filter-section">
        <view class="filter-tabs">
          <view
            v-for="tab in filterTabs"
            :key="tab.value"
            class="filter-tab"
            :class="{ active: currentFilter === tab.value }"
            @click="switchFilter(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
          </view>
        </view>
      </view>

      <!-- 列表内容 -->
      <view class="list-content">
        <!-- 列表项 -->
        <view v-for="item in pointsList" :key="item.id" class="list-item">
          <view class="item-left">
            <view class="title">{{ item.title }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <view class="item-right">
            <text class="points" :class="item.type === 'add' ? 'points-add' : 'points-minus'">
              {{ item.type === 'add' ? '+' : '-' }}{{ item.points }}
            </text>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="pointsList.length === 0 && !loading" class="empty-state">
          <image src="/static/mine/empty.png" class="empty-image" mode="aspectFit" />
          <text class="empty-text">暂无积分记录~</text>
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMore && pointsList.length > 0" class="load-more">
          <uni-load-more :status="loadStatus" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";

// 筛选标签
const filterTabs = ref([
  { label: "全部", value: "all" },
  { label: "收入", value: "add" },
  { label: "支出", value: "minus" },
]);

// 当前筛选
const currentFilter = ref("all");

// 积分列表
const pointsList = ref([]);

// 加载状态
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);
const limit = ref(10);

// 加载状态文本
const loadStatus = computed(() => {
  if (loading.value) return "loading";
  if (!hasMore.value) return "noMore";
  return "more";
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换筛选
const switchFilter = (value) => {
  currentFilter.value = value;
  refreshData();
};

// 刷新数据
const refreshData = () => {
  page.value = 1;
  pointsList.value = [];
  hasMore.value = true;
  loadData();
};

// 加载数据
const loadData = () => {
  // TODO: 调用接口获取积分列表
  console.log("加载积分数据", {
    filter: currentFilter.value,
    page: page.value,
    limit: limit.value,
  });
};

// 加载更多
const loadMore = () => {
  if (loading.value || !hasMore.value) return;
  page.value += 1;
  loadData();
};

// 页面触底事件
onReachBottom(() => {
  loadMore();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
}

// 筛选区域
.filter-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.filter-tabs {
  display: flex;
  gap: 16rpx;
}

.filter-tab {
  flex: 1;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  background-color: #f5f5f5;
  transition: all 0.3s;

  &:active {
    opacity: 0.8;
  }

  &.active {
    background-color: #fabc02;

    .tab-text {
      color: #fff;
      font-weight: 600;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

// 列表内容
.list-content {
  min-height: 400rpx;
}

.list-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:active {
    opacity: 0.9;
  }
}

.item-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.item-right {
  margin-left: 32rpx;
}

.points {
  font-size: 36rpx;
  font-weight: 600;

  &.points-add {
    color: #4caf50;
  }

  &.points-minus {
    color: #f44336;
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

// 加载更多
.load-more {
  padding: 32rpx 0;
}
</style>

